<!-- @format -->

<template>
  <comp-layout hideHeader>
    <comp-header bgColor="transparent">
      <template #header>
        <!-- 搜索框 -->
        <view class="search-box">
          <view class="search-input">
            <uni-icons type="location" size="20" class=""></uni-icons>
            <text class="mgl-2 mgr-2">北京</text>
            <uni-icons type="down" size="14"></uni-icons>
          </view>
          <view class="message-btn flex flex-center">
            <uni-icons type="search" size="16"></uni-icons>
            <text class="mgl-16">搜索</text>
          </view>
        </view>
      </template>
    </comp-header>

    <!-- 地图区域 -->
    <view class="map-container">
      <map
        class="map-view"
        :longitude="theLocation.longitude"
        :latitude="theLocation.latitude"
      ></map>

      <!-- 服务进行中提示 -->
      <view class="service-card">
        <text>您有一项瑜伽服务正在进行</text>
        <button class="view-btn">查看</button>
      </view>
    </view>

    <!-- 预约表单区域 -->
    <view class="booking-form">
      <view class="booking-form-content">
        <!-- 教练类型选择 -->
        <view class="coach-type-selector">
          <view class="coach-type-item" @click="switchCoachType('舞蹈')">
            <view class="flex flex-center" style="width: 50rpx; height: 50rpx">
              <comp-image
                :width="40"
                :height="40"
                src="/static/home/nav1.png"
                mode="widthFix"
              ></comp-image>
            </view>
            <text class="coach-type-text">舞蹈</text>
          </view>
          <view class="coach-type-item" @click="switchCoachType('瑜伽')">
            <view class="flex flex-center" style="width: 50rpx; height: 50rpx">
              <comp-image
                src="/static/home/nav2.png"
                mode="widthFix"
              ></comp-image>
            </view>
            <text class="coach-type-text">瑜伽</text>
          </view>
          <view class="coach-type-item" @click="switchCoachType('健身')">
            <view class="flex flex-center" style="width: 50rpx; height: 50rpx">
              <comp-image
                src="/static/home/nav3.png"
                mode="widthFix"
              ></comp-image>
            </view>
            <text class="coach-type-text">健身</text>
          </view>
          <view class="coach-type-item" @click="switchCoachType('疗愈')">
            <view class="flex flex-center" style="width: 50rpx; height: 50rpx">
              <comp-image
                src="/static/home/nav4.png"
                mode="widthFix"
              ></comp-image>
            </view>
            <text class="coach-type-text">疗愈</text>
          </view>
          <view class="coach-type-item" @click="switchCoachType('高尔夫')">
            <view class="flex flex-center" style="width: 50rpx; height: 50rpx">
              <comp-image
                src="/static/home/nav5.png"
                mode="widthFix"
              ></comp-image>
            </view>
            <text class="coach-type-text">高尔夫</text>
          </view>
        </view>

        <!-- 上次预约信息 -->
        <view class="last-booking">
          <view class="last-booking-content">
            <text>上次预约的Jazz 初级</text>
            <button class="again-btn" @click="onClickAgain">再来一单</button>
          </view>
        </view>
      </view>

      <view class="booking-form-content">
        <!-- 常用空间 -->
        <view class="space-title">常用空间:</view>
        <view class="common-space" @click="showSpaceListModal">
          <view class="space-content">
            <text class="location-name">{{ selectedSpace }}</text>
            <view class="flex flex-center">
              <text class="select-other">选择空间 </text>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
        </view>

        <!-- 服务配置 -->
        <view class="service-config flex flex-wrap space-between">
          <!-- 服务时间 -->
          <view class="config-item" @click="showTimeModal">
            <view class="config-label">服务时间:</view>
            <view class="config-value">
              <text class="time-select">{{ selectedTime }}</text>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>

          <!-- 课时 -->
          <view class="config-item" @click="showDurationModal">
            <view class="config-label">课时:</view>
            <view class="config-value">
              <text class="duration-select">{{ selectedDuration }}</text>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>

          <!-- 教练类别 -->
          <view class="config-item" @click="showCoachModal">
            <view class="config-label">教练类别:</view>
            <view class="config-value">
              <text class="coach-type-select">{{ selectedCoachType }}</text>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>

          <!-- 服务类型 -->
          <view class="config-item" @click="showDanceTypesModal">
            <view class="config-label">服务类型:</view>
            <view class="config-value">
              <text id="service-type-text">{{ selectedServiceType }}</text>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>

          <!-- 预约偏好设置 -->
          <view class="preference-setting" @click="showPreferenceModal">
            <view class="preference-text">
              <uni-icons type="settings" size="20"></uni-icons>
              预约偏好设置</view
            >
            <uni-icons type="right" size="16"></uni-icons>
          </view>
          <!-- 服务定价说明 -->
          <view class="price-info" @click="showPricingInfoModal">
            <comp-image
              src="/static/img/question.png"
              :width="25"
              :height="25"
            ></comp-image>
            <text class="info-text mgl-4">服务定价说明</text>
          </view>
        </view>

        <!-- 下单按钮 -->
        <button class="order-btn flex space-between align-center">
          <view class="flex flex-center">
            <text class="total-price-text">合计金额:</text>
            <text class="price-value mgl-8">{{ selectedPrice }}</text>
          </view>
          <view class="flex flex-center total-btn">
            <text>立即下单</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 模态弹窗区域 -->
    <!-- 时间选择弹窗 -->
    <comp-model
      v-model="timeModalVisible"
      position="bottom"
      title="选择服务时间"
    >
      <view class="modal-content">
        <view class="time-options">
          <view
            class="time-option"
            :class="{ active: selectedTime === '现在' }"
            @click="selectTime('现在')"
          >
            <text>现在</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '今天 14:00' }"
            @click="selectTime('今天 14:00')"
          >
            <text>今天 14:00</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '今天 16:00' }"
            @click="selectTime('今天 16:00')"
          >
            <text>今天 16:00</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '今天 18:00' }"
            @click="selectTime('今天 18:00')"
          >
            <text>今天 18:00</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '今天 20:00' }"
            @click="selectTime('今天 20:00')"
          >
            <text>今天 20:00</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '明天 10:00' }"
            @click="selectTime('明天 10:00')"
          >
            <text>明天 10:00</text>
          </view>
          <view
            class="time-option"
            :class="{ active: selectedTime === '明天 12:00' }"
            @click="selectTime('明天 12:00')"
          >
            <text>明天 12:00</text>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="timeModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 教练类型选择弹窗 -->
    <comp-model
      v-model="coachModalVisible"
      position="bottom"
      title="选择教练类别"
    >
      <view class="modal-content">
        <view class="coach-options">
          <view
            class="coach-option"
            :class="{ active: selectedCoachType === '优选' }"
            @click="selectCoachType('优选')"
          >
            <view class="coach-option-title">优选</view>
            <view class="coach-option-desc">银牌教练，3年以上教学经验</view>
          </view>
          <view
            class="coach-option"
            :class="{ active: selectedCoachType === '精英' }"
            @click="selectCoachType('精英')"
          >
            <view class="coach-option-title">精英</view>
            <view class="coach-option-desc">金牌教练，5年以上教学经验</view>
          </view>
          <view
            class="coach-option"
            :class="{ active: selectedCoachType === '明星' }"
            @click="selectCoachType('明星')"
          >
            <view class="coach-option-title">明星</view>
            <view class="coach-option-desc">明星教练，8年以上教学经验</view>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="coachModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 舞蹈类型选择弹窗 -->
    <comp-model
      v-model="danceTypesModalVisible"
      position="bottom"
      title="选择舞蹈类型"
    >
      <view class="modal-content">
        <view class="dance-options">
          <view
            class="dance-option"
            :class="{ active: selectedServiceType === '舞蹈' }"
            @click="selectServiceType('舞蹈')"
          >
            <text>舞蹈</text>
          </view>
          <view
            class="dance-option"
            :class="{ active: selectedServiceType === '健身' }"
            @click="selectServiceType('健身')"
          >
            <text>健身</text>
          </view>
          <view
            class="dance-option"
            :class="{ active: selectedServiceType === '瑜伽' }"
            @click="selectServiceType('瑜伽')"
          >
            <text>瑜伽</text>
          </view>
          <view
            class="dance-option"
            :class="{ active: selectedServiceType === '高尔夫' }"
            @click="selectServiceType('高尔夫')"
          >
            <text>高尔夫</text>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="danceTypesModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 服务类型选择弹窗 -->
    <comp-model
      v-model="serviceTypeModalVisible"
      position="bottom"
      title="选择服务类型"
    >
      <view class="modal-content">
        <view class="service-options">
          <view class="service-option" @click="selectServiceType('舞蹈')">
            <text>舞蹈</text>
          </view>
          <view class="service-option" @click="selectServiceType('健身')">
            <text>健身</text>
          </view>
          <view class="service-option" @click="selectServiceType('瑜伽')">
            <text>瑜伽</text>
          </view>
          <view class="service-option" @click="selectServiceType('疗愈')">
            <text>疗愈</text>
          </view>
          <view class="service-option" @click="selectServiceType('高尔夫')">
            <text>高尔夫</text>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="serviceTypeModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 课时选择弹窗  -->
    <comp-model
      v-model="durationModalVisible"
      position="bottom"
      title="选择课时"
    >
      <view class="modal-content">
        <view class="duration-options">
          <view
            class="duration-option"
            :class="{ active: selectedDuration === '30min' }"
            @click="selectDuration('30min')"
          >
            <text>30min</text>
          </view>
          <view
            class="duration-option"
            :class="{ active: selectedDuration === '60min' }"
            @click="selectDuration('60min')"
          >
            <text>60min</text>
          </view>
          <view
            class="duration-option"
            :class="{ active: selectedDuration === '90min' }"
            @click="selectDuration('90min')"
          >
            <text>90min</text>
          </view>
          <view
            class="duration-option"
            :class="{ active: selectedDuration === '120min' }"
            @click="selectDuration('120min')"
          >
            <text>120min</text>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="durationModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 空间列表选择弹窗 -->
    <comp-model
      v-model="spaceListModalVisible"
      position="bottom"
      title="选择其他空间"
    >
      <view class="modal-content space-list-content">
        <view class="space-list">
          <view
            class="space-item flex"
            :class="{ active: selectedSpace === '上地国际创业园东区' }"
            @click="selectSpace('上地国际创业园东区', '¥180')"
            v-for="item in 6"
            :key="item"
          >
            <view class="space-img">
              <comp-image
                src="https://www4.bing.com//th?id=OHR.BandaIsland_ZH-CN1145779264_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp"
              >
              </comp-image>
            </view>
            <view>
              <view class="space-item-header">
                <view class="space-item-info">
                  <view class="space-item-name">上地国际创业园东区</view>
                  <view class="space-item-address"
                    >北京市海淀区上地三街金隅嘉华大厦B座</view
                  >
                </view>
                <view class="space-item-distance">300m</view>
              </view>
              <view class="space-item-facilities">
                <view class="facility-tag">空调</view>
                <view class="facility-tag">更衣室</view>
                <view class="facility-tag">WiFi</view>
                <view class="facility-tag">热水</view>
                <view class="facility-tag">淋浴</view>
              </view>
              <view class="space-item-footer">
                <view class="space-item-rating">4.8分</view>
                <view class="space-item-price">¥180</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="spaceListModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 预约偏好设置弹窗 -->
    <comp-model
      v-model="preferenceModalVisible"
      position="bottom"
      title="预约偏好设置"
    >
      <view class="modal-content">
        <view class="preference-section">
          <view class="preference-title">教练性别偏好</view>
          <view class="preference-options">
            <view class="preference-option active">
              <text>不限</text>
            </view>
            <view class="preference-option">
              <text>男教练</text>
            </view>
            <view class="preference-option">
              <text>女教练</text>
            </view>
          </view>
        </view>

        <view class="preference-section">
          <view class="preference-title">语言偏好</view>
          <view class="preference-options">
            <view class="preference-option active">
              <text>中文</text>
            </view>
            <view class="preference-option">
              <text>英文</text>
            </view>
            <view class="preference-option">
              <text>双语</text>
            </view>
          </view>
        </view>

        <view class="preference-section">
          <view class="preference-title">教练经验要求</view>
          <view class="preference-options">
            <view class="preference-option active">
              <text>不限</text>
            </view>
            <view class="preference-option">
              <text>5年以上</text>
            </view>
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="preferenceModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>

    <!-- 服务定价说明弹窗 -->
    <comp-model
      v-model="pricingInfoModalVisible"
      position="bottom"
      title="服务定价说明"
    >
      <view class="modal-content">
        <view class="pricing-items">
          <view class="pricing-item">
            <view class="pricing-item-header">
              <text class="pricing-item-title">基础定价</text>
              <text class="pricing-item-price">¥150</text>
            </view>
            <view class="pricing-item-desc">标准60分钟课时基础服务费用</view>
          </view>

          <view class="pricing-item">
            <view class="pricing-item-header">
              <text class="pricing-item-title">教练等级附加费</text>
              <text class="pricing-item-price">¥50</text>
            </view>
            <view class="pricing-item-desc">优选教练服务品质溢价</view>
          </view>

          <view class="pricing-item">
            <view class="pricing-item-header">
              <text class="pricing-item-title">高峰时段服务费</text>
              <text class="pricing-item-price">¥0</text>
            </view>
            <view class="pricing-item-desc">非高峰时段不收取额外费用</view>
          </view>

          <view class="pricing-item total">
            <view class="pricing-item-header">
              <text class="pricing-item-title">订单合计</text>
              <text class="pricing-item-price">¥200</text>
            </view>
            <view class="pricing-item-desc"
              >所有费用均已包含在内，无隐藏收费</view
            >
          </view>
        </view>
      </view>
      <template #footer>
        <button class="confirm-btn" @click="pricingInfoModalVisible = false">
          确认
        </button>
      </template>
    </comp-model>
  </comp-layout>
</template>

<script setup lang="ts">
  import CompModel from '@/components/comp-model/Index.vue';
  import compHeader from '@/components/comp-header/Index.vue';
  import CompImage from '@/components/comp-image/Index.vue';
  import { ref } from 'vue';
  // 模态框显示状态
  const timeModalVisible = ref(false);
  const coachModalVisible = ref(false);
  const danceTypesModalVisible = ref(false);
  const serviceTypeModalVisible = ref(false);
  const durationModalVisible = ref(false);
  const spaceListModalVisible = ref(false);
  const preferenceModalVisible = ref(false);
  const pricingInfoModalVisible = ref(false);
  const theLocation: any = ref({
    longitude: 116.39742,
    latitude: 39.909,
  });
  // 当前选中的教练类型
  const currentCoachType = ref('舞蹈');

  // 切换教练类型
  function switchCoachType(type: string) {
    currentCoachType.value = type;
    // 这里可以添加更多逻辑，如根据类型加载不同的教练数据等
  }
  // 再来一单
  const onClickAgain = () => {
    uni.navigateTo({
      url: '/subpackages/order/pages/order-confirm/Index', //?id=' + itemId + '&type=service',
    });
  };
  // 显示各种模态框
  function showTimeModal() {
    timeModalVisible.value = true;
  }

  function showCoachModal() {
    coachModalVisible.value = true;
  }

  function showDanceTypesModal() {
    danceTypesModalVisible.value = true;
  }

  function showServiceTypeModal() {
    serviceTypeModalVisible.value = true;
  }

  function showDurationModal() {
    durationModalVisible.value = true;
  }

  function showSpaceListModal() {
    spaceListModalVisible.value = true;
  }

  function showPreferenceModal() {
    preferenceModalVisible.value = true;
  }

  function showPricingInfoModal() {
    pricingInfoModalVisible.value = true;
  }

  // 数据响应式变量
  const selectedTime = ref('现在');
  const selectedDuration = ref('60min');
  const selectedCoachType = ref('优选');
  const selectedServiceType = ref('舞蹈');
  const selectedSpace = ref('上地公牛健身房');
  const selectedPrice = ref('¥200');

  // 选择功能
  function selectTime(time: string) {
    selectedTime.value = time;
    timeModalVisible.value = false;
  }

  function selectDuration(duration: string) {
    selectedDuration.value = duration;
    durationModalVisible.value = false;
  }

  function selectCoachType(coachType: string) {
    selectedCoachType.value = coachType;
    coachModalVisible.value = false;
  }

  function selectServiceType(serviceType: string) {
    selectedServiceType.value = serviceType;
    danceTypesModalVisible.value = false;
    serviceTypeModalVisible.value = false;
  }

  function selectSpace(spaceName: string, hourlyRate: string) {
    selectedSpace.value = spaceName;
    selectedPrice.value = hourlyRate;
    spaceListModalVisible.value = false;
  }
</script>

<style scoped lang="scss">
  /* 地图区域样式 */
  .map-container {
    position: relative;
    height: 45vh;
    background-color: #f0f0f0;
    overflow: hidden;
  }

  /* 选中状态样式 */
  .active {
    background-color: #f0e6ff !important;
    color: #9254de !important;
    border-color: #9254de !important;
  }

  /* 搜索框样式 */
  .search-box {
    display: flex;
    align-items: center;
    z-index: 10;

    width: 393rpx;
    height: 80rpx;
    background: #ffffff;
    box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.14);
    border-radius: 40rpx;
    padding: 0 20rpx;
  }

  .search-input {
    display: flex;
    align-items: center;
    margin-right: 20rpx;

    font-size: 26rpx;
    color: #333333;
    border-right: 1px solid $line;
    width: fit-content;
    padding-right: 26rpx;
    margin-right: 26rpx;
    font-weight: 400;
  }

  .search-icon {
    margin-right: 10rpx;
    font-size: 28rpx;
  }

  .search-placeholder {
    color: #999;
    font-size: 28rpx;
  }

  .message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #cccccc;
    font-weight: 400;
  }

  /* 服务进行中提示卡片 */
  .service-card {
    position: absolute;
    bottom: 10rpx;
    left: 20rpx;
    right: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 5;
    width: 690rpx;
    height: 110rpx;
    background: #ffffff;
    border-radius: 55rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: #333333;
    margin: 0 auto;
    padding: 0 30rpx 0 40rpx;
  }

  .view-btn {
    color: #fff;
    font-size: 24rpx;
    border: none;
    height: 48rpx;
    background: linear-gradient(90deg, #01a7fb 0%, #0075f7 100%);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  /* 教练类型选择器 */
  .coach-type-selector {
    display: flex;
    justify-content: space-between;
    // background-color: #fff;
    padding-bottom: 20rpx;
    border-bottom: 1px solid $line;
  }

  .coach-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx;
  }

  .coach-type-icon {
    font-size: 36rpx;
    margin-bottom: 10rpx;
  }

  .coach-type-text {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #333;

    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 24rpx;
  }

  /* 预约表单区域 */
  .booking-form {
    padding: 30rpx 30rpx 0;
    background-color: $bg-box;
  }

  .booking-form-content {
    width: 690rpx;
    // height: 300rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 50rpx 30rpx;
  }
  .booking-form-content + .booking-form-content {
    margin-top: 26rpx;
  }

  .last-booking-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .last-booking-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    border-radius: 10rpx;

    font-weight: 500;
    font-size: 26rpx;
    color: #666666;
    line-height: 24rpx;
  }

  .again-btn {
    color: #fff;
    border-radius: 30rpx;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    border: none;
    margin: 0;
    width: fit-content;
    height: 48rpx;
    background: linear-gradient(90deg, #01a7fb 0%, #0075f7 100%);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 常用空间 */
  .common-space {
    margin-bottom: 30rpx;
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;

    background: #f4f6fa;
    border-radius: 10rpx;
  }

  .space-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    line-height: 32rpx;
  }

  .space-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .location-name {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
  }

  .select-other {
    font-weight: 500;
    font-size: 26rpx;
    color: #999999;
  }

  /* 服务配置 */
  .service-config {
    margin-bottom: 30rpx;
    gap: 20rpx;
  }

  .config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    width: 303rpx;
    height: 90rpx;
    background: #f4f6fa;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;
  }

  .config-label {
    font-size: 28rpx;
    color: #666;
  }

  .config-value {
    display: flex;
    align-items: center;
  }

  .time-select {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    line-height: 32rpx;
  }
  .arrow {
    color: #999;
    margin-left: 10rpx;
  }

  /* 预约偏好设置 */
  .preference-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
  }

  .preference-text {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }

  /* 服务定价说明 */
  .price-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
    line-height: 32rpx;
  }

  /* 合计金额 */
  .total-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    color: #fe7648;
  }

  .price-value {
    font-size: 36rpx;
    color: #fe7648;
  }
  .total-btn {
    width: 200rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #01a7fb 0%, #0075f7 100%);
    border-radius: 40rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
  }

  /* 下单按钮 */
  .order-btn {
    width: 630rpx;
    height: 124rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(0, 0, 0, 0.14);
    border-radius: 62rpx;

    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
  }

  /* 模态框内容样式 */
  .modal-content {
    /* padding: 30rpx; */
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 时间选择 */
  .time-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .time-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
  }

  /* 教练选项 */
  .coach-options {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .coach-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .coach-option-title {
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .coach-option-desc {
    font-size: 24rpx;
    color: #666;
  }

  /* 舞蹈类型选项 */
  .dance-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .dance-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
  }

  /* 服务类型选项 */
  .service-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .service-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
  }

  /* 课时选项 */
  .duration-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .duration-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
  }

  /* 空间列表 */
  .space-list-content {
    padding: 0;
  }

  .space-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 30rpx;
  }

  .space-item {
    background-color: #fff;
    border: 1rpx solid #eee;
    border-radius: 10rpx;
    padding: 20rpx;
  }

  .space-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }
  .space-img {
    width: 164rpx;
    height: 164rpx;
    background: #f6f6f6;
    border-radius: 10rpx;
  }

  .space-item-title {
    font-weight: bold;
    font-size: 30rpx;
    margin-bottom: 5rpx;
  }

  .space-item-address {
    font-size: 24rpx;
    color: #999;
  }

  .space-item-distance {
    background-color: #f5f5f5;
    padding: 5rpx 15rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #666;
  }

  .space-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin: 15rpx 0;
  }

  .space-tag {
    background-color: #f0f0f0;
    color: #666;
    padding: 5rpx 15rpx;
    border-radius: 30rpx;
    font-size: 22rpx;
  }

  .space-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15rpx;
    border-top: 1rpx solid #f0f0f0;
  }

  .space-item-rating {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
  }

  .rating-icon {
    color: #ffcc00;
    margin-right: 5rpx;
  }

  .space-item-price {
    font-weight: bold;
    color: #8a2be2;
  }

  /* 偏好设置 */
  .preference-section {
    margin-bottom: 30rpx;
  }

  .preference-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
  }

  .preference-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15rpx;
  }

  .preference-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
    text-align: center;
    border: 1rpx solid transparent;
  }

  .preference-option.active {
    background-color: #f9f0ff;
    border-color: #8a2be2;
    color: #8a2be2;
  }

  /* 定价说明 */
  .pricing-items {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .pricing-item {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .pricing-item.total {
    background-color: #f9f0ff;
    border: 1rpx dashed #8a2be2;
  }

  .pricing-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .pricing-item-title {
    font-weight: bold;
  }

  .pricing-item-price {
    color: #8a2be2;
    font-weight: bold;
  }

  .pricing-item-desc {
    font-size: 24rpx;
    color: #666;
  }

  /* 确认按钮 */
  .confirm-btn {
    width: 100%;
    background: linear-gradient(to right, #9932cc, #8a2be2);
    color: #fff;
    border: none;
    border-radius: 50rpx;
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0;
  }
  .map-view {
    width: 100%;
    height: 45vh;
  }
</style>
